<template>
  <el-container>
    <my-theme-card>
      <el-main>
        <el-tabs v-model="activeName" type="border-card">
          <el-tab-pane label="立绘信息" name="1">
            <el-form ref="animationForm" :model="tempAnimation" label-width="130px" :inline="true" :rules="animationRules">
              <el-form-item label="名称" prop="name">
                <el-input v-model="tempAnimation.name" />
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="立绘图片" name="2">
            <el-form ref="imageForm" :model="tempImage" label-position="top" label-width="80px" :rules="imageRules">
              <el-form-item label="缩略图/主要是展示使用" prop="tempThumbnail">
                <div style="display: inline-flex;">
                  <img v-for="item in tempImage.tempThumbnail" :key="item.id" :src="baseUrl+item.url" style="width:50px;height:50px;margin:0 5px 0 5px">
                  <div class="image-choose" style="width:50px;height:50px;line-height:50px;margin:0 5px 0 5px" @click="chooseThumbnailClick">+</div>
                </div>
              </el-form-item>
              <el-form-item label="详情图/主要是详细图片" prop="tempDetail">
                <div style="display: inline-flex;">
                  <img v-for="item in tempImage.tempDetail" :key="item.id" :src="baseUrl+item.url" style="width:108px;height:192px;margin:0 5px 0 5px">
                  <div class="image-choose" style="width:108px;height:192px;line-height:192px;margin:0 5px 0 5px" @click="chooseDetailClick">+</div>
                </div>
              </el-form-item>
            </el-form>
          </el-tab-pane>

          <el-row style="text-align: center;margin-top:20px;">
            <el-button type="primary" @click="addAllTask">确 定</el-button>
            <el-button @click="cancel">取消</el-button>
          </el-row>

        </el-tabs>

      </el-main>

      <el-dialog :title="form.sourceChooseTitle" :visible.sync="dialogSourceVisible" :close-on-click-modal="false" center :custom-class="dialog1" append-to-body>
        <source-list @chooseSourceHandle="closeSourceDialog" />
      </el-dialog>
    </my-theme-card>
  </el-container>
</template>
<style>
  .image-choose{
    text-align: center;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .image-choose:hover {
    border: 1px dashed #1a94d9;
  }
</style>
<script>
import request from '@/utils/request'
const sourceList = () => import('@/components/SourceList/index')
import { clone } from 'lodash'
export default {
  components: {
    sourceList
  },
  data: function() {
    return {
      activeName: '1',
      dialog1: 'dialog1',
      baseUrl: process.env.VUE_APP_BASE_API,
      form: {
        sourceChooseTitle: '缩略图选择'
      },
      tempAnimation: {},
      tempImage: {
        tempThumbnail: [],
        tempDetail: []
      },
      currentAnimation: {},
      currentImageIndex: 'Thumbnail', // 当前选择的图片,
      dialogSourceVisible: false,
      animationRules: {
        name: [
          { required: true, message: '请输入立绘名称', trigger: 'blur' },
          { min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur' }
        ]
      },
      imageRules: {
        tempThumbnail: [
          { type: 'array', required: true, message: '请至少选择一个缩略图', trigger: 'change' }
        ],
        tempDetail: [
          { type: 'array', required: true, message: '请至少选择一个详情图', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    // 选择详情图点击事件
    chooseDetailClick: function() {
      this.currentImageIndex = 'Detail'
      this.form.sourceChooseTitle = '详情图选择'
      this.dialogSourceVisible = true
    },
    // 选择缩略图点击事件
    chooseThumbnailClick: function() {
      this.currentImageIndex = 'Thumbnail'
      this.form.sourceChooseTitle = '缩略图选择'
      this.dialogSourceVisible = true
    },
    closeSourceDialog: function(ids, objs) {
      if (ids && objs) {
        objs.forEach((img) => {
          if (this.currentImageIndex === 'Detail') {
            this.tempImage.tempDetail.push(img)
          } else {
            this.tempImage.tempThumbnail.push(img)
          }
        })
      }
      this.dialogSourceVisible = false
    },
    // 添加立绘任务
    addAllTask: function() {
      // 验证表单内容后提交
      this.validate().then(valid => {
        if (valid) {
          this.$progress.start()
          request({
            url: '/bengbeng/animation/addAll',
            method: 'post',
            data: {
              animation: this.tempAnimation,
              thumbnails: this.tempImage.tempThumbnail,
              details: this.tempImage.tempDetail
            }
          }).then(res => {
            this.$progress.done()
            if (res.result) {
              this.currentAnimation.id = res.data.id
              this.currentAnimation = clone(this.currentAnimation)
              this.cancel()
            } else {
              this.$message.error(res.msg)
            }
          }
          ).catch(() => { this.$progress.done() })
        }
      })
    },
    // 验证所有表单
    validate: function() {
      const self = this
      return new Promise(function(resolve) {
        self.$refs['animationForm'].validate((valid) => {
          if (valid) {
            self.$refs['imageForm'].validate((valid2) => {
              if (valid2) {
                resolve(true)
              } else {
                self.activeName = '2'
                return false
              }
            })
          } else {
            self.activeName = '1'
            return false
          }
        })
      })
    },
    cancel: function() {
      this.$emit('toChangePage', 'list')
    }
  }
}
</script>
